<template>
	<div class="container last_container">
		<el-table height="500" v-loading="tableLoading" :data="tableDatas" highlight-current-row>
			<el-table-column property="order_id" label="订单号" align="center"></el-table-column>
			<el-table-column label="商品" width="330" align="center">
				<template slot-scope="scope">
					<div class="dflex_vertical_c">
						<use-carousel :width="84" :height="84" :img="scope.row.goods_img" :imgs="scope.row.goods_imgs"></use-carousel>
						<div class="left_just margin_l_10">
							<el-popover
								popper-class="use_popover"
								:open-delay="200"
								:close-delay="40"
								placement="right"
								:title="scope.row.goods_name"
								trigger="hover"
								:content="scope.row.goods_name_pw || '--'"
							>
								<div slot="reference" class="dflex_d_c">
									<div class="ellipsis crpr">{{ scope.row.goods_name }}</div>
									<div class="ellipsis crpr">{{ scope.row.goods_name_pw || '--' }}</div>
								</div>
							</el-popover>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="价格" align="center">
				<template slot-scope="scope">
					<div class="price_integral">{{ scope.row.goods_integral }}</div>
					<div class="m_price">{{ scope.row.goods_price / 100 }}</div>
				</template>
			</el-table-column>
			<el-table-column label="商品数量" align="center">
				<template slot-scope="scope">
					<div>×{{ scope.row.goods_num }}</div>
				</template>
			</el-table-column>
			<el-table-column label="分销" align="center">
				<template slot-scope="scope">
					<div>{{ scope.row.is_fxs == '是' ? '是' : '否' }}</div>
				</template>
			</el-table-column>
			<el-table-column property="create_time" label="下单时间" align="center"></el-table-column>
			<div slot="empty"><el-empty description=" "></el-empty></div>
		</el-table>
	</div>
</template>

<script>
const __name = 'wmzmall-integral-order-detail';
export default {
	data() {
		return {
			dataId: '',
			tableLoading: false,
			tableDatas: []
		};
	},
	methods: {
		async loadData(callback) {
			this.tableLoading = true;
			await this.$db[__name]
				.noaction()
				.noshopid()
				.where({ order_id: this.dataId })
				.tolist({ loading: false })
				.then(res => {
					if (res.code == 200) {
						res.datas.forEach((row, idx) => {
							row.previewImgs = [row.goods_img];
							row.create_time = new Date(row.create_time).format();
						});
						this.tableDatas = res.datas;
						
						if (typeof callback === 'function') {
							callback();
						}
					}
					this.tableLoading = false;
				});
		}
	},
	created() {
		this.dataId = this.$route.query.order_id || '';
		this.loadData(() => {
			this.$nextTick(() => {
				this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path + '-goods');
			});
		});
	},
	mounted() {
		this.$nextTick(() => {
			this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path + '-goods');
		});
	}
};
</script>

<style></style>
